<template>
  <DataTable 
  searchPlaceholder="请输入相关信息" 
  :columns="columns" dialogTitle="科室信息表" 
  :formFields="formFields"
  :tableData="departmentData" 
  apiUrl="department" 
  :putUser="putUser" 
  :addUser="addUser" 
  :delUser="delUser" 
  />
</template>

<script setup>
import DataTable from '../../components/DataTable.vue';
import { ref, onMounted } from "vue";
import axios from "axios";

// 定义表格列配置
const columns = [
  { prop: 'officeName', label: '科室名称', width: '200px' },
  { prop: 'department', label: '科室描述', width: 'show-overflow-tooltip' },
]

// 定义表单字段配置
const formFields = [
  { label: '科室名称', model: 'officeName', placeholder: '请输入科室名称' },
  { label: '科室描述', model: 'department', placeholder: '请输入科室' },
];
// 定义用户数据
const departmentData = ref([])

// 获取数据
async function getUserData() {
  try {
    const response = await axios.get('api/office/getAllOffice')
    console.log("userData:", response.data.data)
    departmentData.value = response.data.data
  } catch (error) {
    console.log(error)
  }
}

// 新增数据
async function addUser(formValue) {
  console.log("new")
  console.log(formValue)

  try {
    await axios.post("api/office/addOffice", formValue);
    console.log("科室新增", formValue)
  } catch (error) {
    console.error("新增科室时出错:", error);
  }
}

// 编辑数据
async function putUser(formValue) {
  try {
    await axios.put(`api/office/putOffice/${formValue.id}`, formValue);
    console.log("科室编辑", formValue)
  } catch (error) {
    console.error("编辑科室时出错:", error);
  }
}

// 删除数据确
async function delUser(index, row) {
  try {
    await axios.delete(`api/office/delOffice/${row.id}`);
    console.log("科室删除：", row.id)
  } catch (error) {
    console.error("删除科室时出错:", error);
  }
}
onMounted(() => {
  getUserData()
})
</script>
